<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    title="添加干部职业记录"
    :visible.sync="isOpen"
    append-to-body
    @close="handleClose"
    width="75%"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-row>
        <el-col :span="12">
          <el-form-item label="日期" prop="date">
            <el-date-picker
              v-model="form.date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="变动类型" prop="type">
            <el-select v-model="form.type" placeholder="选择变动类型" @change="handleCareerTypeChange">
              <el-option
                v-for="dict in dict.type.biz_personal_career_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="内容" prop="content">
            <el-input
              v-model="form.content"
              type="textarea"
              placeholder="输入内容"
              :rows="1"
              :autosize="{ minRows: 1, maxRows: 5 }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="form.remarks"
              type="textarea"
              placeholder="输入备注"
              :rows="1"
              :autosize="{ minRows: 1, maxRows: 5 }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>
  
<script>
import { add } from "@/api/organization/civil-servant/careers.js";
export default {
  dicts: ["biz_personal_career_type"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isOpen: false,
      form: {
        date: "",
        type: "",
        content: "",
        remarks: "",
      },
      // 表单校验
      rules: {
        date: [{ required: true, message: "日期不能为空", trigger: "blur" }],
        type: [{ required: true, message: "变动类型不能为空", trigger: "blur" }],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
       
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.isOpen = val;

        if (val) {
          this.form.civilServantId = this.params.id;
        }
      },
    },
  },
  methods: {
    handleCareerTypeChange(){
      this.$refs["form"].validateField('type')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          add(this.form).then((res) => {
            this.$modal.msgSuccess("已新增");
            this.handleClose();
            this.$emit("success");
          });
        }
      });
    },
    // 关闭弹框
    handleClose() {
      this.reset();
      this.$emit("update:visible", false);
    },
    // 表单重置
    reset() {
      this.form = {
        date: "",
        type: "",
        content: "",
        remarks: "",
      };
      this.resetForm("form");
    },
  },
};
</script>

<style>
</style>